.page.admin-page.page-container.detail-page{
    height: calc(100vh - 72px);

    .media-content{
        display: flex;
        justify-content: flex-start;

        .content-info {
            height: calc(100vh - 148px);
        }

        .video-content{
            width: calc(100% - 264px);
            min-height: 550px;
            box-sizing: border-box;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            overflow-y: hidden;
            padding-top: 23px;

            video {
                max-width: 100%;
                max-height: 100%;
            }
            img {
                max-height: 95%;
            }

            // 音频
            .view-audio{
                width: 100%;

                .view-wrapper{
                    width: calc(100% - 64px);
                    margin: 0 auto;
                    height: 200px;
                    border-radius: 4px;
                    overflow: hidden;

                    .view-box{
                        width: 100%;
                        height: 200px;
                    }
                }

                .view-audio-text{
                    width: calc(100% - 64px);
                    margin: 0 auto;

                    >p{
                        margin: 40px 0 20px;
                        color: #1F2329;
                        font-size: 18px;
                        font-weight: 700;
                        text-align: left;

                        >span{
                            color: #2D51A0;
                            margin-left: 20px;

                            >i{
                                display: inline-block;
                                width: 25px;
                                height: 25px;
                                background-image: url("../../assets/img/mediaDetail/tips-loading.png");
                                background-size: 100%;
                                vertical-align: middle;
                                margin-right: 4px;
                            }
                        }
                    }

                    .audio-text{
                        border-radius: 4px;
                        padding: 24px;
                        width: 100%;
                        background: linear-gradient( 180deg, rgba(229,237,255,0.6) 0%, rgba(244,246,255,0.6) 100%);
                        text-align: justify;
                        font-size: 14px;
                        font-weight: 400;
                        color: #3A414D;
                        line-height: 2;
                        height: 376px;
                        overflow-y: auto;
                        

                        >p{margin: 0;}
                    }

                }
            }

            // 视频
            .view-video{
                width: calc(100% - 64px);
                height: 600px;
                margin: 0 auto;
            }

            // 文档
            .view-doc{
                width: 100%;

                >p{
                    font-size: 18px;
                    font-weight: 700;
                    color: #1F2329;
                    margin: 0 0 20px 0;
                    padding-left: 32px;
                    text-align: left;

                    >span{color: #6F7885;}
                }

                .view-box{
                    overflow: hidden;
                    width: calc(100% - 64px);
                    height: calc(100vh - 224px);
                    margin: 0 auto;
                    background: linear-gradient( 180deg, rgba(229,237,255,0.6) 0%, rgba(244,246,255,0.6) 100%);
                    border-radius: 4px;
                }
            }

            // 图片
            .view-image{
                width: 100%;
                
                .view-box{
                    width: calc(100% - 64px);
                    height: 600px;
                    background-color: rgba($color: #1F2329, $alpha: 0.6);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;

                    &:deep() .ant-image{
                        width: calc(100% - 64px);
                        height: 600px;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        >img{width: 100%;}
                    }
                }

                .view-option{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 32px;
                    margin-top: 27px;

                    >p{
                        margin: 0;
                        font-size: 14px;
                        font-weight: 700;
                        color: #1F2329;

                        >span{color: #2D51A0;}
                    }

                    .view-btn{
                        .ant-btn-default{margin-right: 12px;}
                    }
                }
            }
        }
    }
    .page-title{
        padding: 26px 32px 22px 32px;
        height: 76px;

        .left{
            width: calc(100% - 394px);
            display: flex;

            .title{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                width: calc(100% - 28px);
                cursor: pointer;
            }

            .btn-back{
                display: inline-block;
                width: 28px;
                height: 28px;
                margin-right: 8px;
                background-image: url('../../assets/img/mediaDetail/icon-back.png');
                background-size: 100%;
                cursor: pointer;
            }
        }

        .right-option{
            width: 348px;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .option-item{
                font-size: 18px;
                font-weight: 400;
                color: #2D51A0;
                display: flex;
                align-items: center;
                margin-left: 12px;
                cursor: pointer;

                &:first-child{margin-left: 0;}

                >i{
                    display: inline-block;
                    width: 25px;
                    height: 25px;
                    background-image: url('../../assets/img/mediaDetail/icon-fullscreen.png');
                    background-size: 100%;

                    &.e-column{background-image: url('../../assets/img/mediaDetail/icon-e-colunm.png');}
                }

                &:nth-child(2) >i{
                    background-image: url('../../assets/img/mediaDetail/icon-cut.png');
                }
                &:nth-child(3) >i{
                    background-image: url('../../assets/img/mediaDetail/icon-reverse.png');
                }
                &:nth-child(4) >i{
                    background-image: url('../../assets/img/mediaDetail/icon-roate.png');
                }

                >span{margin-left: 8px;}
            }
        }
    }
}